<template>
  <div class="user-management-container">
    <div class="page-header">
      <div class="header-left">
        <h1>用户管理</h1>
        <el-breadcrumb separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/system' }">系统设置</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-button type="primary" @click="handleAddUser">
        <el-icon><Plus /></el-icon>
        添加用户
      </el-button>
    </div>
    
    <el-card>
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索用户名或邮箱"
          prefix-icon="Search"
          style="width: 300px;"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="role" label="角色" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '活跃' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="handleEditUser(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="handleDeleteUser(scope.row.id)">
              {{ scope.row.status === 'active' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalUsers"
          prev-text="上一页"
          next-text="下一页"
          page-sizes-text="条/页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';

// 模拟用户数据
interface User {
  id: number;
  username: string;
  email: string;
  role: string;
  status: 'active' | 'inactive';
  created_at: string;
}

const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const totalUsers = ref(50);
const users = ref<User[]>([]);

// 加载模拟用户数据
const loadUsers = () => {
  // 模拟API请求延迟
  setTimeout(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const mockUsers: User[] = [];
    
    for (let i = 1; i <= pageSize.value && startIndex + i <= totalUsers.value; i++) {
      const id = startIndex + i;
      mockUsers.push({
        id,
        username: `user${id}`,
        email: `user${id}@example.com`,
        role: id % 3 === 0 ? '管理员' : id % 3 === 1 ? '测试人员' : '普通用户',
        status: id % 5 === 0 ? 'inactive' : 'active',
        created_at: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleDateString('zh-CN')
      });
    }
    
    users.value = mockUsers;
  }, 300);
};

// 生命周期钩子
onMounted(() => {
  loadUsers();
});

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  loadUsers();
};

// 处理分页变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  loadUsers();
};

// 处理当前页变化
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  loadUsers();
};

// 添加用户
const handleAddUser = () => {
  // 这里可以添加打开添加用户对话框的逻辑
  console.log('添加用户');
};

// 编辑用户
const handleEditUser = (user: User) => {
  // 这里可以添加打开编辑用户对话框的逻辑
  console.log('编辑用户', user);
};

// 删除/禁用用户
const handleDeleteUser = (userId: number) => {
  // 这里可以添加确认对话框和删除逻辑
  console.log('删除/禁用用户', userId);
};
</script>

<style scoped>
.user-management-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left h1 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .search-container {
    justify-content: center;
  }
  
  .search-container .el-input {
    width: 100% !important;
    max-width: 300px;
  }
  
  .pagination-container {
    justify-content: center;
  }
}
</style>